<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName($route.path)"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <ul class="info">
            <li>
                <img src="~@/assets/icon/cunT.png" alt="" />
                <div>
                    <span>{{ dataList.villageCount || 0 }}</span>
                    <p>村数</p>
                </div>
            </li>
            <li>
                <img src="~@/assets/icon/houseT.png" alt="" />
                <div>
                    <span>{{ dataList.houseCount || 0 }}</span>
                    <p>户数</p>
                </div>
            </li>
            <li>
                <img src="~@/assets/icon/renkouT.png" alt="" />
                <div>
                    <span>{{ dataList.population || 0 }}</span>
                    <p>人口数</p>
                </div>
            </li>
            <li>
                <img src="~@/assets/icon/qiyeT.png" alt="" />
                <div>
                    <span>{{ dataList.enterpriseCount || 0 }}</span>
                    <p>经营主体数</p>
                </div>
            </li>
            <li>
                <img src="~@/assets/icon/zongmianjiT.png" alt="" />
                <div>
                    <span>{{ dataList.totalArea || 0 }}</span>
                    <p>幅员面积(平方公里)</p>
                </div>
            </li>
            <li>
                <img src="~@/assets/icon/jiansheyongdiT.png" alt="" />
                <div>
                    <span>{{ dataList.buildArea || 0 }}</span>
                    <p>建设用地(亩)</p>
                </div>
            </li>
            <li>
                <img src="~@/assets/icon/lindiT.png" alt="" />
                <div>
                    <span>{{ dataList.agriculturalArea || 0 }}</span>
                    <p>耕地(亩)</p>
                </div>
            </li>
        </ul>
        <p class="country-title">村介绍</p>
        <div class="country-info">
            <ul>
                <li
                    v-for="(item, index) in teamList"
                    :key="index"
                    @click="handleJump(item)"
                >
                    <div class="carousel-box">
                        <el-carousel
                            arrow="never"
                            indicator-position="none"
                            v-if="item.advertisingMap"
                        >
                            <el-carousel-item
                                v-for="(
                                    img, index
                                ) in item.advertisingMap.split(',')"
                                :key="index"
                            >
                                <img :src="$staticUrl + img" alt="" />
                                <p class="name">{{ item.shortName }}</p>
                            </el-carousel-item>
                        </el-carousel>
                        <div v-else class="no-img">
                            暂无图片
                            <p class="name">{{ item.shortName }}</p>
                        </div>
                    </div>
                    <div class="info-box">
                        <div :class="item.waterCondition ? 'active' : ''">
                            <img
                                v-if="item.waterCondition"
                                src="~@/assets/icon/shuiT01.png"
                                alt=""
                            />
                            <img
                                v-else
                                src="~@/assets/icon/shuiBT01.png"
                                alt=""
                            />
                            <div>
                                <span>通水</span>
                                <i
                                    :class="
                                        item.waterCondition
                                            ? 'el-icon-success'
                                            : 'el-icon-error'
                                    "
                                ></i>
                            </div>
                        </div>
                        <div :class="item.electricCondition ? 'active' : ''">
                            <img
                                v-if="item.electricCondition"
                                src="~@/assets/icon/dianT01.png"
                                alt=""
                            />
                            <img
                                v-else
                                src="~@/assets/icon/dianBT01.png"
                                alt=""
                            />
                            <div>
                                <span>通电</span>
                                <i
                                    :class="
                                        item.electricCondition
                                            ? 'el-icon-success'
                                            : 'el-icon-error'
                                    "
                                ></i>
                            </div>
                        </div>
                        <div :class="item.gasCondition ? 'active' : ''">
                            <img
                                v-if="item.gasCondition"
                                src="~@/assets/icon/qiT01.png"
                                alt=""
                            />
                            <img
                                v-else
                                src="~@/assets/icon/qiBT01.png"
                                alt=""
                            />
                            <div>
                                <span>通气</span>
                                <i
                                    :class="
                                        item.gasCondition
                                            ? 'el-icon-success'
                                            : 'el-icon-error'
                                    "
                                ></i>
                            </div>
                        </div>
                        <div :class="item.netCondition ? 'active' : ''">
                            <img
                                v-if="item.netCondition"
                                src="~@/assets/icon/wangT01.png"
                                alt=""
                            />
                            <img
                                v-else
                                src="~@/assets/icon/wangBT01.png"
                                alt=""
                            />
                            <div>
                                <span>通网</span>
                                <i
                                    :class="
                                        item.netCondition
                                            ? 'el-icon-success'
                                            : 'el-icon-error'
                                    "
                                ></i>
                            </div>
                        </div>
                    </div>

                    <div class="msg-box">
                        <div class="msg-base">
                            <div>
                                <p>{{ item.groupCount || 0 }}</p>
                                <p>队(组)数</p>
                            </div>
                            <div>
                                <p>{{ item.houseCount || 0 }}</p>
                                <p>户数</p>
                            </div>
                            <div>
                                <p>{{ item.population || 0 }}</p>
                                <p>人口数</p>
                            </div>
                            <div>
                                <p>{{ item.enterpriseCount || 0 }}</p>
                                <p>经营主体数</p>
                            </div>
                        </div>

                        <div class="msg-resource">
                            <p>
                                <span>幅员面积(平方公里)：</span>
                                <span :title="item.totalArea || 0">{{
                                    item.totalArea || 0
                                }}</span>
                            </p>
                            <p>
                                <span>已流转耕地(亩)：</span>
                                <span :title="item.transferredCultivatedLand || 0">{{
                                    item.transferredCultivatedLand || 0
                                }}</span>
                            </p>
                            <p>
                                <span>总耕地(亩)：</span>
                                <span :title="item.agriculturalArea || 0">{{
                                    item.agriculturalArea || 0
                                }}</span>
                            </p>
                            <p>
                                <span>建设用地(亩)：</span>
                                <span :title="item.buildArea || 0">{{
                                    item.buildArea || 0
                                }}</span>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({ name: "TownInfo" })
export default class TownInfo extends Vue {
    dataList = {
        advertisingMap: "",
        countryCount: "",
        houseCount: "",
        population: "",
        enterpriseCount: "",
        number: "",
        weather: "",
        address: "",
        lng: "",
        lat: "",
        feature: "",
        totalArea: "",
        agriculturalArea: "",
        buildArea: "",
        introduction: ""
    };

    teamList: any = [];
    setInterval: any = null;

    created() {
        this.getData();
        this.getInfo();
    }

    // 查询镇村的信息
    async getInfo() {
        const res = await this.$server["townAndvillage/query"]({ data: {} });
        if (res.data.code === 200) {
            this.dataList = res.data.data || {};
        }
    }

    async getData() {
        const res = await this.$server["country/queryList"]({
            data: { currentPage: 1, pageSize: 99999 }
        });
        if (res.data.code === 200) {
            this.teamList = res.data.data.records;
        }
    }

    // 跳转到村组信息
    handleJump(item: any) {
        this.$router.push({
            name: "village-team-info",
            query: {
                id: item.id,
                villageCode: item.cityCode,
                name: item.shortName
            }
        });
    }

    beforeDestroy() {
        clearInterval(this.setInterval);
        this.setInterval = null;
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
        background: transparent !important;
    }
}

.info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    li {
        width: calc(100% / 7 - 3px);
        max-width: 200px;
        height: 80px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 4px;
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 28px;
            height: 24px;
        }
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            span {
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #37383a;
                line-height: 33px;
            }
            p {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #6b6c70;
                line-height: 20px;
            }
        }
    }
}

.country-info {
    ul {
        li {
            width: 100%;
            height: 242px;
            background: #ffffff;
            display: flex;
            padding: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            .carousel-box {
                flex-shrink: 1;
                width: 420px;
                padding-right: 20px;
                /deep/ .el-carousel__container {
                    background-color: #f3f3f3;
                    text-align: center;
                    height: 222px;
                    overflow: hidden;
                    img {
                        max-width: 420px;
                        height: 222px;
                    }
                }
                .name {
                    margin: 0;
                    height: 40px;
                    line-height: 40px;
                    text-align: right;
                    padding-right: 30px;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    font-weight: bold;
                    color: #ffffff;
                    font-size: 16px;
                    background-color: rgba(0, 0, 0, 0.3);
                }
                .no-img {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: rgba(0, 0, 0, 0.3);
                    color: #fff;
                    font-size: 14px;
                    position: relative;
                }
            }
            .info-box {
                // width: 400px;
                flex-basis: 400px;
                display: flex;
                height: 222px;
                flex-wrap: wrap;
                justify-content: space-between;
                font-size: 14px;
                & > div {
                    width: calc(50% - 5px);
                    height: 106px;
                    background: rgba(222, 39, 40, 0.1);
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 40px;
                    padding-right: 25px;
                    img {
                        height: 30px;
                    }
                }
                & > div:nth-child(n + 3) {
                    margin-top: 10px;
                }
                & > div.active {
                    background: rgba(50, 167, 143, 0.1);
                }
                .el-icon-error {
                    color: #de2728;
                    margin-left: 5px;
                }
                .el-icon-success {
                    color: #32a78f;
                    margin-left: 5px;
                }
            }
            .msg-box {
                flex: 1;
                min-width: 450px;
                padding-left: 20px;
                padding-right: 10px;
                box-sizing: border-box;
                overflow: hidden;
                & > div {
                    display: flex;
                }
                .msg-resource {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    padding: 33px 0;
                    height: 121px;
                    p {
                        width: 45%;
                        margin: 0 0 10px 0;
                        display: flex;
                        justify-content: space-between;
                        span:first-child {
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 20px;
                            color: #9da1a4;
                        }
                        span:last-child {
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 20px;
                            color: #37383a;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .msg-base {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    height: 121px;
                    position: relative;
                    p {
                        margin: 0;
                    }
                    p:first-child {
                        font-size: 24px;
                        font-weight: bold;
                        line-height: 33px;
                        color: #37383a;
                    }
                    p:last-child {
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 20px;
                        color: #6b6c70;
                    }
                    &::after {
                        content: "";
                        display: block;
                        width: calc(100% + 40px);
                        height: 1px;
                        background: #f3f3f3;
                        position: absolute;
                        bottom: 0;
                        right: -40px;
                    }
                }
            }
        }
    }
}
.country-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #37383a;
    margin: 10px 0;
}
</style>
